<template>
	<view class="content">
		<view class="card">
			<view class="card-title">收款人</view>
			<view class="card-input-box">
				<input type="number" v-model="form.mobile" placeholder="请输入转入人(C端手机号码)">
			</view>
		</view>
		<view class="card">
			<view class="card-title">转赠焕贝金额</view>
			<input type="number" placeholder="请输入金额" v-model="form.money" @confirm="getCommission"
				@blur="getCommission">

			<view>实际转赠金额：{{realPrice}}</view>
			<view>手续费：{{servicePrice || '--'}}</view>
		</view>
		<view class="card">
			<view class="card-title">付款钱包</view>
			<template v-for="v in wallet">
				<label @click="changeWalletCheck(v)">
					<image class="radio-icon" v-if="v.check" :src="$xcxImg('/radio.png')" />
					<image class="radio-icon" v-else :src="$xcxImg('/radio1.png')" />
					<text>{{v.name}} {{ walletData[v.field] }}</text>
				</label>
			</template>
			<!-- <label @click="checkAll">
				<image class="radio-icon" v-if="checkedInfo.checked" :src="$xcxImg('/radio.png')" />
				<image class="radio-icon" v-else :src="$xcxImg('/radio1.png')" />
				<text>组合支付</text>
			</label> -->
		</view>
		<view class="tips">{{tips}}</view>

		<view class="btn" @click="submit">转赠</view>
		<navigator hover-class="none" url="/pages/user/transfer/log" class="log text-gray">转赠记录&nbsp;&nbsp;></navigator>
		
		
		<passwordPopupVue :isShow.sync="isShowPwd" @onFinish="onFinish" />
	</view>
</template>

<script>
	import {
		getUserWallet as getWallet,
		addDonate,
		obtainDonate
	} from '@/API/wallet.js'
	import func from '@/utils/func.js'
	import passwordPopupVue from "@/components/common/passwordPopup.vue";
	export default {
		components: {
			passwordPopupVue
		},
		data() {
			return {
				form: {
					money: '',
					mobile: '',
					wallet_type: ""
				},

				tips: '钱包支持组合支付，基于分佣钱包优先扣款',

				wallet: [],
				field: {
					money: 'sell',
					commission: 'commission'
				},
				realPrice: 0, // 实际转赠金额
				walletData: {}, //
				servicePrice: '', // 转赠手续费

				show: [],
				passwordType: null,
				isShowPwd: false,
			}
		},
		mounted() {
			this.getUserWallet()

			this.$commonNetwork.getUserIdenInfoData((res) => {
				//如果是商家 才会有销售钱包
				if (res.code === 1) {
					this.wallet.push({
						name: '销售钱包',
						field: 'money',
						check: false,
					})
				}
				//普通用户和城市合伙人才有红包钱包
				// if (res.code === 0 || res.partner_type === 3) {
					this.show.push('bribe')
				// }
				//城市合伙人才会有分佣钱包  身份类型:1=个人合伙人,2=商户合伙人,3=城市服务商
				if (res.partner_type !== null) {
					this.wallet.push({
						name: '分佣钱包',
						field: 'commission',
						check: false,
					})
				}
			});
		},
		onShow() {
			this.$commonNetwork.getUserIdenInfoData((res) => {
				this.passwordType = res.is_avoid;
			});
		},
		computed: {
			checkedInfo() {
				let check = 0
				let checkArr = []
				for (let i of this.wallet) {
					if (i.check) {
						check++
						checkArr.push(this.field[i.field])
					}
				}

				return {
					checked: check == this.wallet.length,
					num: check,
					checkArr,
				}
			}
		},
		methods: {
			getUserWallet() {
				getWallet().then(res => {
					this.walletData = res.data
					// console.log('-=-=-=res', list)
				})
			},
			changeWalletCheck(item) {
				item.check = !item.check
				this.getCommission()
			},
			checkAll(e) {
				let check = this.checkedInfo.checked
				for (let i of this.wallet) {
					i.check = !check
				}
			},
			getCommission() {
				if (!this.form.money) return
				if (!this.checkedInfo.num) return this.$st.show('请选择付款钱包')
				obtainDonate({
					money: this.form.money,
					wallet_type: this.checkedInfo.checkArr[0]
				}).then(res => {
					this.realPrice = res.data.price
					this.servicePrice = res.data.service_price
					console.log('-=-=-=res', res)
				})
			},
			submit() {
				if (!this.form.money) return this.$st.show('请输入转赠金额')
				if (!this.form.mobile) return this.$st.show('请输入收款人手机号')
				if (!func.isMobile(this.form.mobile)) return this.$st.show('手机号格式错误')
				if (!this.checkedInfo.num) return this.$st.show('请选择付款钱包')
				
				if (this.checkedInfo.checked) {
					this.form.wallet_type = 'make_up'
				} else {
					for (let i of this.wallet) {
						if (i.check) {
							this.form.wallet_type = i.field
							break;
						}
					}
				}
				
				if (this.passwordType === null) {
					this.$st.show("请设置支付密码", () => {
						this.$jump.to("/pages/mine/setting/payPassword")
					})
					return;
				}
				
				if (this.passwordType == 0) {
					this.isShowPwd = true;
					return;
				}
				this.onFinish("");
			},
			onFinish(pwd) {
				addDonate({
					...this.form,
					password: pwd,
				}).then(res => {
					uni.redirectTo({
						url: './success?id=' + res.data.donate_id
					})
				})
			}
		}
	}
</script>
<style lang="less" scoped>
	.content {
		padding-bottom: 200rpx;
	}

	.card {
		margin-top: 20rpx;
		width: 750rpx;
		background-color: #fff;
		padding: 25rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;

		&-title {
			font-weight: bold;
		}

		&-input-box {
			display: flex;
			align-items: center;
			height: 240rpx;
		}

		label {
			display: flex;
			align-items: center;
			gap: 20rpx;
		}

		input {
			min-height: 70rpx;
			font-size: 56rpx;
			color: #303133;
			flex: 1;
		}
	}

	.tips {
		margin-top: 24rpx;
		padding: 24rpx 32rpx;
		color: #f00;
	}

	.btn {
		margin: 50rpx auto 0;
		width: 320rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: linear-gradient(162.65deg, #00a2ff 0%, rgba(22, 111, 219, 0.65) 100%);
		border-radius: 40rpx;
		color: #ffffff;
		font-size: 28rpx;
	}

	.log {
		font-size: 24rpx;
		margin: 0 auto;
		text-align: center;
		padding: 50rpx;
	}

	/deep/checkbox {
		margin-right: 20rpx;
	}

	/deep/checkbox .wx-checkbox-input {
		width: 40rpx;
		height: 40rpx;
	}
</style>